<template>
  <div>
    <!-- 背景 start-->
    <div class="bg_nav">
      <img :src="newbg" />
    </div>
    <!-- 背景 end -->
    <!-- 内容区域 start -->
    <div class="contenenr_all">
      <div class="contenenr_header">
        <img :src="headbg" />
        <div class="abstract">
          <div>
            <img :src="btnbg" />
            <div class="abstract_conten">
              <!-- <h2>公司简介</h2> -->
              <div
                style="padding: 0 100px 0 100px;"
              >恋爱密室隶属于云南楚雄市喵爪科技有限公司，是一款私密靠谱的社交App。公司致力于打造一款大众化的娱乐社交产品， 以用户需求为核心，以大众喜爱为向导，让用户真真切切体验到我们产品带来的便利。</div>
              <div
                style="padding: 0 100px 0 100px;"
              >爱情是一朵生长在悬崖峭壁边缘上的花，想摘取就务必要有勇气。我们鼓励每个来到恋爱密室的你，勇敢去追求你的爱情，不论成败，我们希望你在这里收获成长和快乐，最后达到爱情的终点。</div>
            </div>
          </div>
        </div>
      </div>
      <div class="profile">
        <div>
          <img :src="profilebg" />
          <div class="profile_nav">
            <div class="profile_nav_head">
              <div>
                <div></div>
              </div>
              <div>联系我们</div>
              <div>
                <div></div>
              </div>
            </div>
            <div class="profile_nav_content">
              <div>
                <div class="profile_data">
                  <h3>云南楚雄市喵爪科技有限公司</h3>
                  <div>Q Q：&nbsp;542593653</div>
                  <div>微信：&nbsp;qiu19820506</div>
                  <div>地址：&nbsp;云南省楚雄高新区永安路北侧彝人古镇玉兰苑70幢19-2室</div>
                </div>
              </div>
              <div>
                <div class="map" id="map_continer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 内容区域 end -->
  </div>
</template>
<script>
export default {
  head() {
    return {
      title: "恋爱密室-关于我们",
      meta: [
        {
          hid: "description",
          name: "description",
          content:
            "恋爱密室是一款私密且真实靠谱的交友app，每个人内心深处都有一个密室，只有那把意喻着真爱的密匙才能开启你的心门。在恋爱密室，我们会带领着那个属于你的ta，跨过心门，走进密室，贴近你的灵魂"
        },
        {
          name: "keywords",
          content: "恋爱密室,恋爱密室app,恋爱密室官网,恋爱密室下载,喵爪科技"
        }
      ],
      script: [
        {
          src:
            "https://webapi.amap.com/maps?v=1.4.4&key=d4401f91d79510b670c8df69b779d97f"
        }
      ]
    };
  },
  name: "aboutPage",
  data() {
    return {
      logoUrl: require("@/assets/article/logo.png"),
      newbg: require("@/assets/home/newbg.jpg"),
      btnbg: require("@/assets/aboutPage/btnbg.png"),
      headbg: require("@/assets/aboutPage/headerbg.jpg"),
      profilebg: require("@/assets/aboutPage/profilebg.png")
    };
  },
  mounted() {
    this.loadmap(); //加载地图和相关组件
  },
  created(){
    // this.loadmap(); //加载地图和相关组件
  },
  methods: {
    loadmap() {
      const map = new AMap.Map("map_continer", {
        zoom: 20,
        center: [101.524409, 25.06133]
      });
      var marker = new AMap.Marker({
        position: [101.524409, 25.06133]
      });
      marker.setMap(map);
      var circle = new AMap.Circle({
        center: [120.200675, 30.177504],
        radius: 100,
        fillOpacity: 0.2,
        strokeWeight: 1
      });
      circle.setMap(map);
      map.setFitView();
      //设置介绍信息
      var content = [
        "<div style=''padding:0px' 0px='' 4px;'=''><b>云南楚雄市喵爪科技有限公司</b>",
        "<strong>电话：</strong>: 028-83435515",
        "<strong>地址：</strong>: 楚雄市高新区永安路北侧</div></div>"
      ];
      var info = new AMap.InfoWindow({
        content: content.join("<br>"), //传入 dom 对象，或者 html 字符串
        offset: new AMap.Pixel(0, -28)
      });
      info.open(map, marker.getPosition());
    }
  }
};
</script>
<style scoped>
@import "../../assets/home/home.css";
@import "../../assets/aboutPage/aboutPage.css";
div >>> .amap-logo {
  display: none;
  opacity: 0 !important;
}
div >>> .amap-copyright {
  opacity: 0;
}
</style>